<template>
	<view class="content">
		<view class="top-content">
			<!-- <image class="canzheng-bgc" src="../../static/images/zhishuo/canzheng-bgc.png"></image> -->
			<customNavbar title="宣传文章信息"></customNavbar>
			<view class="top-info">
				<view class="top-big-title">宣传文章信息</view>
				<view class="canzheng-area-content">
					<view class="canzheng-area">地区 高新四支部</view>
					<view class="canzheng-year">时间 {{timeYear}}年</view>
				</view>
			</view>
			<view class="selectCom">
				<uni-data-select v-model="selectYear" :localdata="rangeYears" @change="change" :clear="false">

				</uni-data-select>
			</view>

			<view class="canzheng-renshuzongshu">
				<view class="canzheng-zongrenshu">
					<view class="canzhengyizheng-num">{{wenZhangInfo.wzCount}}</view>
					<view class="canzheng-top-title">文章总数</view>
				</view>
				<view class="canzhneg-pishizongshu">
					<view class="beipishi-num">{{wenZhangInfo.allCount}}</view>
					<view class="beipishi-top-title">被采纳总数</view>
				</view>
			</view>
			<view class="canzheng-list" v-if="this.$common.isEmptyTest(wenZhangScreenList) === false">

				<view class="main-content-item" v-for="item in wenZhangScreenList" :key="item.name">
					<view class="name">
						<view>{{item.name}}</view>
						<image @click="toDescribe(item)" class="name-img" src="../../static/images/zhishuo/编组备份.png">
						</image>
					</view>
					<view class="tian">
						<view>篇数</view>
						<view class="pianshu">{{item.wenZhangCount}}</view>
					</view>
					<view class="score"  v-if="hasAdmin">
						<view>得分</view>
						<view class="defen">{{item.score}}</view>
					</view>

				</view>


			</view>
			
			<view style="display: flex;justify-content: center;align-items: center;padding-top:40px"  v-if="this.$common.isEmptyTest(wenZhangScreenList) === true">
				<view>
					<image mode="widthFix"  src="../../static/images/zhishuo/quesheng.png"></image>
					<view style="text-align: center;font-weight: bold;">暂无数据</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import customNavbar from '../../components/customNavbar/customNavbar.vue'
	import {
		xuanchuanwenzhang
	} from '../../api/index.js'

	export default {
		components: {
			customNavbar
		},
		data() {
			return {
				selectYear: 3,
				handlerLoading: false,
				wenZhangScreenList: '',
				wenZhangInfo: '',
				timeYear: '',
				rangeYears: [],
					hasAdmin: uni.getStorageSync('hasAdmin')
			}
		},
		onShow() {
			this.getWenZhangData()
		},
		onLoad() {
			this.timeYear = this.$store.state.year
			this.rangeYears = this.$store.state.rangeYears
			for (let item of this.rangeYears) {
				if (this.timeYear.toString() === item.text.slice(0, -1)) {
					this.selectYear = item.value
				}
			}

		},
		methods: {
			change(e) {
				for (let item of this.rangeYears) {
					if (e === item.value) {
						this.timeYear = item.text.slice(0, -1)
					}
				}
				this.getWenZhangData()
			},
			toDescribe(item) {
				this.$common.navigateTo('/pages-wenzhang/wenzhang/wenzhang-detail?year=' + this.timeYear + '&detailInfo=' +
					JSON.stringify(item))
			},
			getWenZhangData() {
				this.handlerLoading = true
				xuanchuanwenzhang({
					year: this.timeYear
				}).then(res => {

					if (res.errors.length > 0) {
						uni.showToast({
							title: res.errors,
							icon: 'none',
							duration: 2000,
						});
					} else {
						this.wenZhangInfo = res
						this.wenZhangScreenList = res.personDataList;

						this.wenZhangScreenList.forEach(item => {
							item.wenZhangCount = item.dataList.length
						})

					}

				}).catch(err => {
					console.log(err);
					this.$common.errorToShow(err)
					this.handlerLoading = false;
				})
			},

		},

	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-select {
		height: 60rpx;
		border: 0;
		background-color: #ffffff;
	}
	.content {
		height: 100%;
		width: 100%;
		background-color: #F9F9F9;

		.top-content {
			background-image: url('');
			width: 100%;
			height: vw(500);
			background-size: cover;

			.top-info {
				padding: vw(30) vw(0) vw(0) vw(36);

				.top-big-title {
					font-size: 32px;
					font-weight: bold;
					text-align: left;
					color: #ffffff;
				}

				.canzheng-area-content {
					display: flex;
margin-top: vw(15);
					.canzheng-area {
						font-size: vw(24);
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: Regular;
						text-align: left;
						color: #ffffff;
						margin-right: vw(40);

					}

					.canzheng-year {
						font-size: vw(24);
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: Regular;
						text-align: left;
						color: #ffffff;
					}
				}
			}

			.selectCom {
				width:vw(160);
			
				margin: vw(24) vw(0) vw(0) vw(32);
			}

			.canzheng-renshuzongshu {
				width: 100%;
				display: flex;
				justify-content: space-evenly;
				margin-top: vw(30);

				.canzheng-zongrenshu {
					width: vw(332);
					height: vw(160);
					background-size: cover;
					background-image: url('');
					border-radius: vw(16);
					padding: vw(26) vw(0) vw(0) vw(30);

					.canzhengyizheng-num {

						font-size: vw(44);
						font-family: DIN Alternate Bold;
						font-weight: Bold;
						text-align: left;
						color: #3771eb;
						margin-bottom: vw(12);
					}

					.canzheng-top-title {

						font-size: vw(28);
						font-weight: Regular;
						text-align: left;
						color: #333333;

					}

				}

				.canzhneg-pishizongshu {
					width: vw(332);
					height: vw(160);
					background-size: cover;
					background-image: url('');
					border-radius: vw(16);
					padding: vw(26) vw(0) vw(0) vw(30);

					.beipishi-num {
						font-size: vw(44);
						font-family: DIN Alternate Bold;
						font-weight: Bold;
						text-align: left;
						color: #3771eb;
						margin-bottom: vw(12);
					}

					.beipishi-top-title {
						font-size: vw(28);
						font-weight: Regular;
						text-align: left;
						color: #333333;
					}
				}
			}

			.canzheng-list {
				width: 100%;
				margin-top: vw(20);

				.main-content-item {
					width: vw(686);
					height: fit-content;
					background: #ffffff;
					border-radius: vw(16);
					box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.03);
					margin: 0 auto vw(20);
					padding-bottom: vw(20);

					.name {
						display: flex;
						justify-content: space-between;
						padding: vw(30) vw(20) vw(0) vw(20);
						font-size: vw(28);
						font-family: PingFang SC, PingFang SC-Semibold;
						font-weight: bold;
						text-align: left;
						color: #333333;

						.name-img {
							width: vw(40);
							height: vw(40);
						}


					}

					.tian {
						display: flex;
						justify-content: space-between;
						padding: vw(24) vw(20) vw(0) vw(20);
						font-size: vw(28);
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: Regular;
						text-align: left;
						color: #333333;

						.pianshu {
							color: #333333;
							margin-right: vw(4);
						}

					}

					.score {
						display: flex;
						justify-content: space-between;
						padding: vw(24) vw(20) vw(0) vw(20);
						font-size: vw(28);
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: Regular;
						text-align: left;
						color: #333333;

						.defen {
							color: #333333;
							margin-right: vw(4);
						}
					}

				}
			}
		}
	}
</style>
